<script setup lang="ts">
import {ElMessage, ElMessageBox} from 'element-plus'

// 表单
import {onMounted, reactive, ref} from "vue";

import {test, addti, deleteid, Querying} from "@/api/teacher/wang/shiti";

const formInline = reactive({
  thematics: "",
  answer: "",
  title: "",
  paperId: "",
  id: "",
  optionA: "",
  optionB: "",
  optionC: "",
  optionD: "",
  page:1,
  limit:5
});
// 对话框
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const BatchImport = ref(false)
const tableData: any = ref('')

const total = ref()


onMounted(() => {
a(formInline)
})
const a=(obj:Object)=>{
  test(obj).then(res => {
    console.log(res)
    tableData.value=res.data.data.questions
    // console.log(res.data.count)
    // console.log(res.data.data.thematics)

    total.value=res.data.count
    console.log(total.value)
  })
}

// 搜索
const onSubmit = () => {
  Querying(formInline).then(res=>{
    tableData.value=res.data.data.questions;
    total.value=res.data.count
    // a(formInline)
  })

};


// 添加专题
const addClick = () => {
  console.log("addClick");
  console.log(formInline)
  addti(formInline).then(res=>{
    total.value=res.data.count
  })
  dialogFormVisible.value=false
};
const add = ref(0);

// 删除
const handleDel =(data:any)=>{
  console.log(data.row.id)
  deleteid(data.row.id).then(res=>{
    total.value=res.data.count
  })
  a(formInline)
}

// 分页
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  formInline.page=val

  a(formInline)

}
// const handleDel = ({_id}) => {
//   console.log(_id);
//   let index = tableData.findIndex(item => item._id === _id)
//   console.log(index)
//   tableData.splice(index,1)
// };

import {UploadFilled} from '@element-plus/icons-vue'

</script>

<template>
  <div style="width: 80vw; height: 100vh">
    <div class="common-layout">
      <el-container>
        <el-header class="title"> 试题管理</el-header>
        <el-main>
          <div class="search">
            <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline"
            >
              <el-form-item>
                <el-input
                    v-model="formInline.title"
                    placeholder="请输入题名称"
                    clearable
                />
                <el-select v-model="formInline.paperId" placeholder="选择试卷">
                  <el-option label="测试1" value="1" />
                  <el-option label="测试2" value="2" />
                  <el-option label="Python零基础新手小白入门到项目实战" value="3" />
                  <el-option label="JAVA高级互联网架构师｜java进阶架构师专题" value="4" />
                  <el-option label="Python零基础新手小白入门到项目实战" value="5" />
                  <el-option label="Python零基础新手小白入门到项目实战" value="6" />
                  <el-option label="JAVA高级互联网架构师｜java进阶架构师专题" value="7" />
                  <el-option label="Python零基础新手小白入门到项目实战" value="8" />
                  <el-option label="Python零基础新手小白入门到项目实战" value="9" />
                  <el-option label="JAVA高级互联网架构师｜java进阶架构师专题" value="10" />
                  <el-option label="Python零基础新手小白入门到项目实战" value="11" />
                  <el-option label="Python零基础新手小白入门到项目实战" value="12" />
                  <el-option label="测试3" value="13" />
                  <el-option label="444441" value="19" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
                <el-button type="primary" @click="dialogFormVisible = true">
                  增加题目
                </el-button>
                <el-button type="primary" @click="BatchImport = true">批量导入</el-button>
              </el-form-item>
            </el-form>
          </div>

          <div class="result">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="title" label="题目" width="300"/>
              <el-table-column prop="optionA" label="选项A" width="150"/>
              <el-table-column prop="optionB" label="选项B" width="150"/>
              <el-table-column prop="optionC" label="选项C" width="150"/>
              <el-table-column prop="optionD" label="选项D" width="150"/>
              <el-table-column prop="answer" label="答案" width="150"/>
              <el-table-column fixed="right" label="操作">
                <template #default="scope">
                  <el-button
                      link
                      type="primary"
                      size="small"
                      @click="handleDel(scope)"
                  >删除
                  </el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-main>
      </el-container>
      <!--      批量导入-->
      <el-dialog v-model="BatchImport" title="批量导入">
        <el-upload
            class="upload-demo"
            drag
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            multiple
        >
          <el-icon class="el-icon--upload">
            <upload-filled/>
          </el-icon>
          <div class="el-upload__text">
            将文件拖到此处或<em>点击上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              jpg/png files with a size less than 500kb
            </div>
          </template>
        </el-upload>
      </el-dialog>

      <!--      增加题目-->
      <el-dialog v-model="dialogFormVisible" title="题目">
        <el-form :model="formInline">
          <el-form-item label="题目" :label-width="formLabelWidth">
            <el-input v-model="formInline.title" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="试卷" :label-width="formLabelWidth">
            <el-select v-model="formInline.paperId" placeholder="请选择">
              <el-option label="测试1" value="1"/>
              <el-option label="测试2" value="2"/>
              <el-option label="Python零基础新手小白入门到项目实战" value="3"/>
              <el-option label="JAVA高级互联网架构师｜java进阶架构师专题" value="4"/>
              <el-option label="Python零基础新手小白入门到项目实战" value="5"/>
              <el-option label="Python零基础新手小白入门到项目实战" value="6"/>
              <el-option label="JAVA高级互联网架构师｜java进阶架构师专题" value="7"/>
              <el-option label="Python零基础新手小白入门到项目实战" value="8"/>
              <el-option label="Python零基础新手小白入门到项目实战" value="9"/>
              <el-option label="JAVA高级互联网架构师｜java进阶架构师专题" value="10"/>
              <el-option label="Python零基础新手小白入门到项目实战" value="11"/>
              <el-option label="Python零基础新手小白入门到项目实战" value="12"/>
              <el-option label="测试3" value="13"/>
            </el-select>
          </el-form-item>
          <div class="Options">
            <span>A</span>.
            <el-input v-model="formInline.optionA" style="width: 200px"/>
          </div>
          <div class="Options">
            <span>B</span>.
            <el-input v-model="formInline.optionB" style="width: 200px"/>
          </div>
          <div class="Options">
            <span>C</span>.
            <el-input v-model="formInline.optionC" style="width: 200px"/>
          </div>
          <div class="Options">
            <span>D</span>.
            <el-input v-model="formInline.optionD" style="width: 200px"/>
          </div>
          <el-form-item label="正确答案" :label-width="formLabelWidth">
            <el-select v-model="formInline.answer" placeholder="请选择">
              <el-option label="A" value="A"/>
              <el-option label="B" value="B"/>
              <el-option label="C" value="C"/>
              <el-option label="D" value="D"/>
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addClick ">
          提交
        </el-button>
      </span>
        </template>
      </el-dialog>
    </div>
    <el-pagination

        v-model:current-page="formInline.page"
        v-model:page-size="formInline.limit"
        layout="prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.search {
  display: flex;
  justify-content: space-between;
}

.title {
  line-height: 55px;
  box-shadow: -1px 1px 1px 3px #f5f7fa;
}

.Options {
  margin-left: 125px;
}

.btn {
  float: right;
  margin-right: 10px;
}
</style>
